<template lang="">
  <div>
    <h2>药品分类</h2>
    <div
      style="
        display: flex;
        justify-content: space-between;
        width: 80vw;
        border-bottom: 1px solid #ccc;
      "
    >
      <div>
        名字：<a-input-search
          :style="{ width: '320px' }"
          placeholder="请输入"
          v-model="values"
          @search="onSearch"
        />
      </div>
      <a-space>
        <a-button type="primary">重置</a-button>
        <a-button type="outline">查询</a-button>
      </a-space>
    </div>
    <div style="margin-top: 20px; width: 80vw">
      <div style="display: flex; justify-content: space-between">
        <p>药品分类</p>
        <a-button type="primary" @click="handleClick">
          <template #icon>
            <icon-plus />
          </template>
          新建
        </a-button>
      </div>
      <a-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :row-selection="rowSelection"
      >
        <template #index="{ rowIndex }">
          <span>{{ rowIndex + 1 }}</span>
        </template>
        <template #coverImage="{ record }">
          <a-image width="90" :src="record.coverImage" />
        </template>
        <template #op="{ record }">
          <a-space #default="scope">
            <a-button type="primary" status="danger" size="mini">
              <template #icon>
                <icon-delete @click="del(record.id)" />
              </template>
            </a-button>
            <a-button size="mini" type="primary">
              <template #icon>
                <icon-edit @click="edit(record.id, record)" />
              </template>
            </a-button>
          </a-space>
        </template>
      </a-table>
    </div>
  </div>
  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <div>
      <p>名字</p>
      <a-input
        :style="{ width: '320px' }"
        placeholder="请输入分类名字"
        allow-clear
        v-model="name"
      />
      <p>简介</p>
      <a-textarea :style="{ width: '320px' }" placeholder="请输入简介" allow-clear v-model="desc" />
      <p>图片</p>
      <a-upload
        v-model:file-list="fileList"
        list-type="picture-card"
        class="avatar-uploader"
        name="file"
        :show-upload-list="false"
        action="http://101.42.35.238:3006/common/upload"
        @success="onSuccess"
      >
        <a-button>
          <a-image width="90" src="" />
        </a-button>
      </a-upload>
    </div>
  </a-modal>
  <a-modal v-model:visible="visibles" @ok="handleOkss" @cancel="handleCancels">
    <div>
      <p>名字</p>
      <a-input
        :style="{ width: '320px' }"
        placeholder="请输入分类名字"
        allow-clear
        v-model="name"
      />
      <p>简介</p>
      <a-textarea :style="{ width: '320px' }" placeholder="请输入简介" allow-clear v-model="desc" />
      <p>图片</p>
      <a-upload
        v-model:file-list="fileList"
        list-type="picture-card"
        accept="image/*"
        method="post"
        class="avatar-uploader"
        name="file"
        action="http://101.42.35.238:3006/common/upload"
        @success="onSuccess"
      >
        <a-button>
          <a-image width="90" src="" />
        </a-button>
      </a-upload>
    </div>
  </a-modal>
</template>
<script>
import { IconPlus, IconDelete, IconEdit } from '@arco-design/web-vue/es/icon'
import {
  getMedicineAPI,
  addMedicineAPI,
  delMedicineAPI,
  editMedicineAPI,
  getMedicinessAPI
} from '../../api/api'
import axios from 'axios'
import { imgs } from '../../tools/request'
export default {
  components: { IconPlus, IconDelete, IconEdit },
  data() {
    return {
      values: '',
      visible: false,
      visibles: false,
      checkbox: true,
      rowSelection: {
        type: 'checkbox',
        showCheckedAll: true
      },
      fileList: [],
      image: '',
      name: '',
      desc: '',
      id: '',
      pagination: { pageSize: 4 },
      data: [
        {
          id: 1,
          name: 'iphone 16 pro',
          amount: 12,
          desc: 'qeeqe',
          coverImage:
            'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1nqZvc.img?w=768&h=432&m=6'
        }
      ],
      columns: [
        {
          title: '序号',
          slotName: 'index'
        },
        {
          title: '名字',
          dataIndex: 'name'
        },
        {
          title: '主图',
          slotName: 'coverImage',
          dataIndex: 'coverImage'
        },
        {
          title: '描述',
          dataIndex: 'desc',
          width: 600
        },
        {
          title: '操作',
          slotName: 'op',
          align: 'center'
        }
      ]
    }
  },

  methods: {
    
    onSuccess(currentFile) {
      console.log(currentFile)
      this.image = currentFile.response.data
      console.log(this.image)
    },
    //收缩
    onSearch(values) {
      this.data = []
      getMedicinessAPI(values).then((res) => {
        console.log(res)
        this.data = res.data.list.map((item) => ({
          ...item,
          coverImage: imgs(item.image)
        }))
        console.log(this.data)
      })
    },

    liat() {
      getMedicineAPI().then((res) => {
        console.log(res)
        this.data = res.data.list.map((item) => ({
          ...item,
          coverImage: imgs(item.image)
        }))
        //console.log(this.data);
      })
    },
    // onProgress(event, file) {
    //   console.log(event)
    //   this.image = event.url
    //   console.log(this.image)
    // },
    handleClick() {
      console.log('ok')
      this.visible = true
      this.name = ''
      this.desc = ''
      this.fileList = []
    },
    handleCancel() {
      this.visible = false
    },
    //添加
    handleOk() {
      addMedicineAPI({
        name: this.name,
        desc: this.desc,
        image: this.image
      }).then((res) => {
        console.log(res)
        this.liat()
      })
    },
    //删除
    async del(id) {
      console.log('ok')
      console.log(id)
      let res = await delMedicineAPI(id)
      console.log(res)
      this.liat()
    },
    //修改
    handleCancels() {
      this.visibles = false
    },
    edit(id, record) {
      console.log(id)
      this.visibles = true
      this.id = id
      console.log(record);
      if (record) {
        this.name = record.name
        this.desc = record.desc
        this.fileList = [{ url: record.coverImage }]
        this.image = record.image
      }
    },
    async handleOkss() {
      let res = await editMedicineAPI(this.id, {
        name: this.name,
        desc: this.desc,
        image: this.image
      })
      console.log(res)
      this.liat()
      this.visible = false
      this.name = ''
      this.desc = ''
      this.image = ''
    }
  },
  mounted() {
    this.liat()
  }
}
</script>
<style lang=""></style>
